<template>
  <div class="charts_wrap">
    <div class="charts_main" ref="lineChart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
let option = {
  tooltip: {
    trigger: "axis",
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["4周", "5周", "6周", "7周", "8周"],
    axisLabel: {
      show: false,
      color: "#E5F9FF", // 设置 x 轴标签文字颜色为黑色
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#A0DFFA", // 设置 y 轴坐标轴颜色为绿色
      },
    },
    axisTick: {
      show: false, // 是否显示刻度线
    },
  },
  yAxis: {
    type: "value",
    boundaryGap: false,
    axisLabel: {
      show: false,
      color: "#E5F9FF", // 设置 y 轴标签文字颜色为深灰色
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#A0DFFA", // 设置 y 轴坐标轴颜色为绿色
      },
    },
    splitLine: {
      show: true, // 是否显示分割线
      lineStyle: {
        color: "#1FBAFD", // 分割线颜色
        type: "dashed", // 线型，可选为：'solid' | 'dashed' | 'dotted'
        width: 1, // 线宽
        opacity: 0.5, // 透明度，范围：0 ~ 1
      },
    },
  },
  series: [
    {
      name: "水声信号数据",
      type: "line",
      showSymbol: false,
      seriesLayoutBy: "row",
      emphasis: { focus: "series" },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(10, 250, 161, 1)",
          },
          {
            offset: 1,
            color: "rgba(10, 250, 161, 0)",
          },
        ]),
      },
      data: [0, 320, 320, 320, 320],
    },
  ],
};
export default {
  data() {
    return {
      chart: null,
    };
  },
  props: {
    chartData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  watch: {
    chartData: {
      deep: true,
      immediate: true,
      handler: function (val) {
        this.$nextTick(() => {
          if (val?.length) {
            this.initChartFn();
          }
        });
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChartFn();
    });
  },
  methods: {
    initChartFn() {
      if (!this.chart) {
        let dom = this.$refs.lineChart;
        this.chart = echarts.init(dom);
      }
      this.setChartOptionsFn();
    },
    setChartOptionsFn() {
      this.chart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.charts_wrap {
  width: 100%;
  height: 100%;
  .charts_main {
    width: 100%;
    height: 100%;
  }
}
</style>
